{template 'header'}
<style type="text/css">
.event-page {
    padding-bottom:80px;
}
.event-page .can-refund-bar {
    background:#fff;
    height:38px;
    width:100%;
    position:fixed;
    bottom:60px;
    max-width:480px;
    left:0;
    right:0;
    margin:auto;
    box-shadow:0 -1px 1px 1px #f9f9f9;
}
.event-page .can-refund-bar img {
    width:18px;
    height:auto;
    margin-right:8px;
}
.selection{
	display: none;
}
.event-page .can-refund-bar p {
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    font-size:18px;
}
.chapter-loader .sk-fading-circle {
    width:40px;
    height:40px;
    position:relative;
}
.chapter-loader .sk-fading-circle .sk-circle {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.chapter-loader .sk-fading-circle .sk-circle:before {
    content:'';
    display:block;
    margin:0 auto;
    width:15%;
    height:15%;
    background-color:#fff;
    border-radius:100%;
    -webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
    -webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.chapter-loader .sk-fading-circle .sk-circle2 {
    -webkit-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    transform:rotate(30deg);
}
.chapter-loader .sk-fading-circle .sk-circle3 {
    -webkit-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    transform:rotate(60deg);
}
.chapter-loader .sk-fading-circle .sk-circle4 {
    -webkit-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}
.chapter-loader .sk-fading-circle .sk-circle5 {
    -webkit-transform:rotate(120deg);
    -webkit-transform:rotate(120deg);
    -ms-transform:rotate(120deg);
    transform:rotate(120deg);
}
.chapter-loader .sk-fading-circle .sk-circle6 {
    -webkit-transform:rotate(150deg);
    -webkit-transform:rotate(150deg);
    -ms-transform:rotate(150deg);
    transform:rotate(150deg);
}
.chapter-loader .sk-fading-circle .sk-circle7 {
    -webkit-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
.chapter-loader .sk-fading-circle .sk-circle8 {
    -webkit-transform:rotate(210deg);
    -webkit-transform:rotate(210deg);
    -ms-transform:rotate(210deg);
    transform:rotate(210deg);
}
.chapter-loader .sk-fading-circle .sk-circle9 {
    -webkit-transform:rotate(240deg);
    -webkit-transform:rotate(240deg);
    -ms-transform:rotate(240deg);
    transform:rotate(240deg);
}
.chapter-loader .sk-fading-circle .sk-circle10 {
    -webkit-transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    transform:rotate(270deg);
}
.chapter-loader .sk-fading-circle .sk-circle11 {
    -webkit-transform:rotate(300deg);
    -webkit-transform:rotate(300deg);
    -ms-transform:rotate(300deg);
    transform:rotate(300deg);
}
.chapter-loader .sk-fading-circle .sk-circle12 {
    -webkit-transform:rotate(330deg);
    -webkit-transform:rotate(330deg);
    -ms-transform:rotate(330deg);
    transform:rotate(330deg);
}
.chapter-loader .sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay:-1.1s;
    -webkit-animation-delay:-1.1s;
    animation-delay:-1.1s;
}
.chapter-loader .sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay:-1s;
    -webkit-animation-delay:-1s;
    animation-delay:-1s;
}
.chapter-loader .sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay:-0.9s;
    -webkit-animation-delay:-0.9s;
    animation-delay:-0.9s;
}
.chapter-loader .sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay:-0.8s;
    -webkit-animation-delay:-0.8s;
    animation-delay:-0.8s;
}
.chapter-loader .sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay:-0.7s;
    -webkit-animation-delay:-0.7s;
    animation-delay:-0.7s;
}
.chapter-loader .sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay:-0.6s;
    -webkit-animation-delay:-0.6s;
    animation-delay:-0.6s;
}
.chapter-loader .sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay:-0.5s;
    -webkit-animation-delay:-0.5s;
    animation-delay:-0.5s;
}
.chapter-loader .sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay:-0.4s;
    -webkit-animation-delay:-0.4s;
    animation-delay:-0.4s;
}
.chapter-loader .sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay:-0.3s;
    -webkit-animation-delay:-0.3s;
    animation-delay:-0.3s;
}
.chapter-loader .sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay:-0.2s;
    -webkit-animation-delay:-0.2s;
    animation-delay:-0.2s;
}
.chapter-loader .sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay:-0.1s;
    -webkit-animation-delay:-0.1s;
    animation-delay:-0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
.g-event-bottom .play-button {
    background-color:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'};
    box-shadow:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'} 0px 0px 4px 0px;
}
.g-event-bottom .red {
    background-color:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'};
}
.g-event-bottom .play-button:active {
    background-color:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'};
    opacity:0.9;
}
.g-event-bottom .bottom-button-right-right {
    background-color:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'};
}
.g-event-bottom .button-mid-right {
    background-color:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'};
}
.g-event-bottom .button-mid-right .btn-rg:active {
    background-color:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'};
}
.g-event-bottom .redp-bottom-btn-right {
    background-color:{php echo $book['ltcolor']?$book['btncolor']:'#ffe398'};
    color:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'};
}
.g-event-bottom .redp-bottom-btn-right:active {
    background-color:{php echo $book['ltcolor']?$book['btncolor']:'#ffe398'};
}
.g-event-bottom .schedule-head {
    border:3px solid {php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'} !important;
}
.g-event-bottom .schedu{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'}{
    background:{php echo $book['ltcolor']?$book['ltcolor']:'#ed3974'} !important;
}
.g-event-bottom {
    height:60px;
    background:#fff;
    padding:0;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    z-index:1;
    text-align:center;
}
@-webkit-keyframes event-redp-gold-1 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(0, 10px, 0);
        -ms-transform:translate3d(0, 10px, 0);
        transform:translate3d(0, 10px, 0);
    }
}
@keyframes event-redp-gold-1 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(0, 10px, 0);
        -ms-transform:translate3d(0, 10px, 0);
        transform:translate3d(0, 10px, 0);
    }
}
@-webkit-keyframes event-redp-gold-2 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(-10px, 10px, 0);
        -ms-transform:translate3d(-10px, 10px, 0);
        transform:translate3d(-10px, 10px, 0);
    }
}
@keyframes event-redp-gold-2 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(-10px, 10px, 0);
        -ms-transform:translate3d(-10px, 10px, 0);
        transform:translate3d(-10px, 10px, 0);
    }
}
@-webkit-keyframes event-redp-gold-3 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(10px, 10px, 0);
        -ms-transform:translate3d(10px, 10px, 0);
        transform:translate3d(10px, 10px, 0);
    }
}
@keyframes event-redp-gold-3 {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform:translate3d(10px, 10px, 0);
        -ms-transform:translate3d(10px, 10px, 0);
        transform:translate3d(10px, 10px, 0);
    }
}
@-webkit-keyframes redp-flip {
    0% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
    }
    50% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
    }
    100% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
    }
}
@keyframes redp-flip {
    0% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 0deg);
    }
    50% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 180deg);
    }
    100% {
        -webkit-transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
        -ms-transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
        transform:perspective(400px) rotate3d(0, 1, 0, 360deg);
    }
}
.g-event-bottom.v2 {
    height:72px;
}
.g-event-bottom.v2 .button-wrap {
    height:72px;
    box-shadow:0 -1px 15px 1px rgba(0, 0, 0, 0.05);
}
.g-event-bottom.v2 .rp-menu {
    bottom:72px;
}
.g-event-bottom .redp-wrap .close {
    position:absolute;
    right:20px;
    width:16px;
    top:20px;
}
.g-event-bottom .redp-wrap .redp-no-opened .redp-no-opened-content {
    max-width:335px;
    width:280px;
    height:425.43px;
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
    padding-top:60px;
    line-height:1.7;
}
.g-event-bottom .redp-wrap .redp-no-opened .avatar {
    width:60px;
    height:60px;
    border-radius:100%;
    overflow:hidden;
}
.g-event-bottom .redp-wrap .redp-no-opened .name {
    color:#FFE0AB;
    font-size:18px;
    margin-bottom:19px;
}
.g-event-bottom .redp-wrap .redp-no-opened .l1 {
    color:#FFE0AB;
    font-size:20px;
    margin-bottom:51px;
}
.g-event-bottom .redp-wrap .redp-no-opened .open-icon {
    width:112px;
    opacity:1;
}
.g-event-bottom .redp-wrap .redp-opened .redp-opened-content {
    max-width:335px;
    width:280px;
    height:425.43px;
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
    padding-top:60px;
    line-height:1.7;
    background-image:url('{RES}img/openredbg.png');
    color:#FFE0AB;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.g-event-bottom .redp-wrap .redp-opened .avatar-wrap {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-bottom:42px;
}
.g-event-bottom .redp-wrap .redp-opened .avatar-wrap .avatar {
    width:40px;
    height:40px;
    margin-right:10px;
}
.g-event-bottom .redp-wrap .redp-opened .avatar-wrap .avatar img {
    border-radius:100%;
    object-fit:cover;
}
.g-event-bottom .redp-wrap .redp-opened .avatar-wrap p {
    font-size:16px;
    line-height:16px;
}
.g-event-bottom .redp-wrap .redp-opened .price {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    font-size:51px;
    margin-bottom:5px;
}
.g-event-bottom .redp-wrap .redp-opened .price p {
    line-height:51px;
}
.g-event-bottom .redp-wrap .redp-opened .price small {
    font-size:20px;
    margin-left:5px;
    margin-top:16px;
}
.g-event-bottom .redp-wrap .redp-opened .l1 {
    font-size:16px;
    margin-bottom:60px;
}
.g-event-bottom .redp-wrap .redp-opened .btn {
    width:207px;
    height:48px;
    margin:auto;
    background:#F15642;
    font-size:20px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    margin-bottom:10px;
    border-radius:24px;
}
.g-event-bottom .redp-wrap .redp-opened .time {
    color:#A3A5B0;
}
.g-event-bottom .rp-menu {
    position:fixed;
    bottom:60px;
    height:180px;
    line-height:1.7;
    background:#fff;
    width:100%;
    max-width:480px;
    z-index:2;
    left:0;
    right:0;
    margin:auto;
}
.g-event-bottom .rp-menu li {
    border-bottom:1px solid #f0f0f0;
    height:60px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    padding:0 10px;
    font-size:16px;
}
.g-event-bottom .anim-flip {
    -webkit-animation:redp-flip 1.5s linear 0s infinite;
    animation:redp-flip 1.5s linear 0s infinite;
}
.g-event-bottom .menu .menu-wrap {
    z-index:0;
    background-color:#fff;
    height:400px;
    bottom:-340px;
    -webkit-transition:bottom 0.5s ease;
    transition:bottom 0.5s ease;
}
.g-event-bottom .menu .menu-wrap .menu-top {
    height:40px;
    width:100%;
    padding-top:10px;
}
.g-event-bottom .menu .menu-wrap .menu-top img {
    width:25px;
    height:8px;
    margin-top:5px;
}
.g-event-bottom .menu .menu-wrap .menu-title {
    position:relative;
    height:30px;
    width:100%;
    text-indent:41px;
    line-height:30px;
    text-align:left;
    font-weight:600;
    font-size:20px;
}
.g-event-bottom .menu .menu-wrap .menu-title::before {
    content:' ';
    position:absolute;
    left:28px;
    top:5px;
    width:6px;
    height:21px;
    background:-webkit-linear-gradient(#fe5064, #fe956f);
}
.g-event-bottom .menu .menu-wrap .menu-list {
    padding:0 15px;
    height:280px;
    overflow:auto;
    margin-top:20px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li {
    padding:8px 0;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    border-bottom:1px solid #efefef;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-li-txt {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    line-height:30px;
    text-align:left;
    text-indent:15px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .txt-color {
    color:#fe5164;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-img {
    margin-right:10px;
    width:24px;
    height:24px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-img img {
    height:20px;
    width:20px;
    margin-top:5px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-img .lock-img {
    height:18px;
    width:18px;
}
.g-event-bottom .menu .menu-wrap .menu-list .menu-li .menu-txt {
    width:60px;
    line-height:28px;
    color:#fe5164;
    margin-right:0;
}
.g-event-bottom .botton-wrap {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    position:relative;
    height:60px;
    width:100%;
    background:#fff;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}
.g-event-bottom .botton-wrap.v2 {
    height:72px;
    box-shadow:0 -1px 15px 1px rgba(0, 0, 0, 0.05);
}
.g-event-bottom .botton-wrap .audio-btn-wrap {
    margin-left:16px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.g-event-bottom .botton-wrap .audio-btn-wrap .play-button {
    margin-right:8px;
    border-radius:100%;
    width:52px;
    height:52px;
}
.g-event-bottom .botton-wrap .audio-btn-wrap .audio-txt {
	display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height:100%;
    line-height:1.5;
    font-size:14px;
}
.g-event-bottom .botton-wrap .bottom-button-right {
    -webkit-text-decoration:none;
    text-decoration:none;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    height:100%;
    line-height:1.7;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:90px;
    margin:0 20px;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left .opened-price {
    text-align:left;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left .opened-price p {
    font-size:18px;
    line-height:22px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    font-weight:bolder;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left .opened-price p small {
    margin-left:5px;
    font-size:12px;
    color:#777A8B;
    -webkit-text-decoration:line-through;
    text-decoration:line-through;
    font-weight:normal;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-left .opened-price .red {
    font-size:12px;
    border-radius:10px;
    color:#fff;
    width:90px;
    text-align:center;
    display:block;
    font-weight:normal;
}
.g-event-bottom .botton-wrap .bottom-button-right .bottom-button-right-right {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    color:#fff;
    font-size:20px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.g-event-bottom .botton-wrap .loader .sk-fading-circle {
    width:30px;
    height:30px;
}
.g-event-bottom .botton-wrap .audio-schedule {
    position:absolute;
    display:none;
    height:30px;
    width:100%;
    top:-30px;
    line-height:30px;
    background-color:#fff;
    border-top:1px solid #ddd;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-start {
    width:60px;
    height:100%;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-bar-wrap {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-bar-wrap .schedule-bar {
    position:relative;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    width:100%;
    height:5px;
    background-color:#ddd;
    border-radius:15px;
    margin-top:12px;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-bar-wrap .schedule-bar .schedule-len {
    position:absolute;
    left:0;
    width:0%;
    height:100%;
    background:-webkit-linear-gradient(left, #fe956f, #fe5064);
    border-radius:15px;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-bar-wrap .schedule-bar .schedule-len .schedule-head {
    position:absolute;
    right:-14px;
    top:-4.6px;
    height:15px;
    width:15px;
    border-radius:50%;
    background:#fff;
    touch-action:none;
    border:3px solid #fe6a68;
}
.g-event-bottom .botton-wrap .audio-schedule .schedule-end {
    width:60px;
    height:100%;
}
.g-event-bottom .botton-wrap .button-left {
    width:34%;
    height:60px;
    line-height:60px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.g-event-bottom .botton-wrap .button-left .audio-btn {
    height:45px;
    width:45px;
    margin-top:8px;
}
.g-event-bottom .botton-wrap .button-left .audio-txt {
    font-size:17px;
    text-align:left;
    font-weight:600;
    text-indent:7px;
    line-height:63px;
}
.g-event-bottom .botton-wrap .button-mid-right {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    height:60px;
}
.g-event-bottom .botton-wrap .button-mid-right .btn-rg {
    height:60px;
    width:100%;
    padding-top:18px;
    line-height:27px;
    font-weight:600;
    font-size:23px;
    -webkit-letter-spacing:3px;
    -moz-letter-spacing:3px;
    -ms-letter-spacing:3px;
    letter-spacing:3px;
    color:#fff;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn {
    line-height:1.7;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:60px;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-left {
    color:#fff;
    margin-left:10px;
    width:81px;
    margin-right:10px;
    text-align:left;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-left .top {
    font-size:12px;
    line-height:12px;
    margin-bottom:5px;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-left .bottom {
    font-size:12px;
    line-height:12px;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-right {
    height:50px;
    line-height:24px;
    font-size:14px;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    border-radius:24px;
    margin-right:8px;
}
.g-event-bottom .botton-wrap .button-mid-right .redp-bottom-btn .redp-bottom-btn-right:active {
    opacity:0.9;
}
.g-event-bottom .video-modal-wrap {
    line-height:1.7;
}
.g-event-bottom .video-modal-wrap .video-wrap {
    line-height:0;
}
.g-event-bottom .video-modal-wrap .video-wrap video {
    background:#fff;
}
.g-event-bottom .video-modal-wrap .video-modal-content {
    max-width:480px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .close {
    width:30px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap {
    padding-top:6px;
    background:#fff;
    margin-bottom:20px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .title {
    margin-bottom:16px;
    padding:0 16px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .title .left {
    font-size:19px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .title .right {
    font-size:16px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter {
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:hidden;
    padding-bottom:15px;
    vertical-align:top;
    vertical-align:top;
    border-bottom:1px solid #eee;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap {
    vertical-align:top;
    overflow:hidden;
    position:relative;
    width:156px;
    height:91px;
    background:#f7f5f5;
    border-radius:6px;
    display:inline-block;
    margin-right:8px;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap:last-child {
    margin-right:0;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap.active {
    color:#FE5164;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap:active {
    opacity:0.7;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap.lock {
    color:#999;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap.lock::after {
    content:' ';
    background-image:url(https://staticqc.xiaoxiafm.com/image/video-lock.ed7003caea5fa2878b452b556c290447.png);
    width:19px;
    height:16px;
    position:absolute;
    right:3px;
    top:4px;
    background-size:contain;
    background-repeat:no-repeat;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap .chapter-item {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    height:91px;
    text-align:center;
    overflow:hidden;
    white-space:normal;
}
.g-event-bottom .video-modal-wrap .video-modal-content .chapter-wrap .chapter .chapter-item-wrap p {
    width:112px;
}
</style>
    <div class="event-page" style="padding-bottom: 72px;">
        <div class="g-page g-img-full" style="overflow: hidden;">
            <div>
                <div class="g-rlt" style="margin-bottom: 0px;">
                    <img src="{php echo toimage($book['tabthumb'])}">
                </div>
                <div>
                    <nav style="position: relative; box-shadow: rgb(238, 238, 238) 0px 1px 10px 1px; padding: 10px 0px; display: flex; width: 100%; bottom: 0px; height: 46px; background-color: rgb(255, 255, 255); text-align: center; max-width: 480px;">
                        <button data-type='introduce' style="width: 50%; background-color: rgb(255, 255, 255); line-height: 25px; font-size: 17px; letter-spacing: 2px; font-weight: bold; box-sizing: content-box; border-right: 1px solid rgb(221, 221, 221); position: relative;">课程介绍<span class="g-badge" style="right: 20%; display: none;"></span>
                        </button>
                        <button data-type='selection' style="width: 50%; background-color: rgb(255, 255, 255); line-height: 25px; font-size: 17px; letter-spacing: 2px; font-weight: bold; box-sizing: content-box; border-right: none; position: relative;">{if $book['booktips']}{$book['booktips']}{else}精选书单{/if}<span class="g-badge" style="right: 20%; display: inline-block;"></span>
                        </button><span style="left: 0%; display: block; position: absolute; height: 4px; width: 50%; background-color: rgb(237, 57, 116); bottom: 0px;"></span>
                    </nav>
                    <script type="text/javascript">
                    $(function(){
                    	$('nav button').click(function(){
                    		var ts = $(this).parent().find('span');
                    		if($(this).attr('data-type')=='introduce'){
                    			$('.introduce').show();
                    			$('.selection').hide();
                    			ts.css('left','0');
                    		}else{
                    			$('.selection').show();
                    			$('.introduce').hide();
                    			ts.css('left','50%');
                    		}
                    		$(this).find('span').css('display','none');
                    		var h = $('.g-rlt').height();
                    		$(window).scrollTop(h);
                    	});
                    });
                    </script>
                </div>
                <div class="main-wrap">
                    <div class="introduce">
                    	{$book['introduce']}
                    </div>
                    <div class="selection" style="dispaly: none;">
                    	{$book['selection']}
                    </div>
                </div>
            </div>
            <div class="g-event-bottom g-fixed-bottom footer-tab">
            	{if $list}
	            <!-- 轮播 -->
                <div class="g-book-scroll g-book-scroll-b" style="width: 205px; height: 40px; border-radius: 20px; position: absolute; background-color: rgba(58, 61, 66, 0.6); overflow: hidden; margin-left: 15px; bottom: 82px; max-width: 400px; right: 10px;">
                    <div class="scroll-content" style="transition:all .25s linear;WebketTransition:all .25s linear;transform:translateY(0px);WebketTransform:translateY(0px)">
                    	{loop $list $li}
                        <div class="get-book-item g-flex" style="width: 100%; height: 40px; -webkit-box-align: center; align-items: center; padding: 6px;">
                            <img src="{$li['avatar']}" style="width: 30px; height: 30px; border-radius: 17px; overflow: hidden; border: none; background-size: cover; flex-shrink: 0; margin-right: 6px;">
                            <p style="font-size: 12px; line-height: 12px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(240, 240, 240);">{$li['nickname']}{$li['content']}</p>
                        </div>
                        {/loop}
                    </div>
                </div>
                <script>
                	$(function(){
                		var bnum = Number("{php echo count($list)}");
                		var bindex = 1;
                		var tt = setInterval(function(){
                			var h = bindex * 40;
                			if(bindex == 0){
                				$('.g-book-scroll .scroll-content').css({'transition':'none','WebketTransition:all':'none','transform': 'translateY(40px)','WebketTransform':'translateY(40px)'});
                				setTimeout(function(){
		                			$('.g-book-scroll .scroll-content').css({'transition':'all .25s linear','WebketTransition:all':'all .25s linear','transform': 'translateY(-'+h+'px)','WebketTransform':'translateY(-'+h+'px)'});
                				},50);
                			}else{
	                			$('.g-book-scroll .scroll-content').css({'transition':'all .25s linear','WebketTransition:all':'all .25s linear','transform': 'translateY(-'+h+'px)','WebketTransform':'translateY(-'+h+'px)'});
                			}
                			bindex++;
                			if(bindex == bnum){
                				bindex = 0;
                			}
                		},2000);
                	})
                </script>
                {/if}
                <div class="menu">
                    <div class="g-mask-box" style="display: none;">
                        <div class="g-mask menu-mask"></div>
                    </div>
                    <div class="menu-wrap g-fixed-bottom g-font-14" style="bottom: -340px;">
                        <div class="menu-top">
                            <img src="{RES}img/down.png">
                        </div>
                        <div class="menu-title">目录 <span style="font-weight: normal; font-size: 14px;">(含{$dnum}章节，共{$cnum}节课)</span>
                        </div>
                        <div class="menu-list g-smooth-scroll">
                            <div class="menu-list-wrap">
                            	{loop $dir $d}
                                <div>
                                    <div class="menu-li">
                                        <div class="menu-li-txt" style="text-indent: 5px; font-weight: bold;">{$d['title']}</div>
                                    </div>
                                    {loop $chapter[$d['id']] $c}
                                    {if $c['st']==1}
                                    <a class="menu-li g-normal-a" href="javascript:;">
                                        <div class="menu-li-txt txt-color">{$c['title']}</div>
                                        <div class="menu-img menu-txt">试听中</div>
                                    </a>
                                    {else}
                                    <a class="menu-li g-normal-a lock-li" href="javascript:;">
                                        <div class="menu-li-txt g-color-grey">{$c['title']}</div>
                                        <div class="menu-img menu-txt">
                                            <img class="lock-img" src="{RES}img/lock.png">
                                        </div>
                                    </a>
                                    {/if}
                                    {/loop}
                                </div>
                                {/loop}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rp-box" style="display: none;">
                    <div class="g-mask"></div>
                    <div class="rp-menu">
                       	<li>
                            <div class="left g-color-grey">原价</div>
                            <div class="right g-color-grey">￥{$book['original']}</div>
                        </li>
                        <li>
                            <div class="left g-color-grey">红包抵扣</div>
                            <div class="right g-color-grey">￥{$book['redback']}</div>
                        </li>
                        <li>
                            <div class="left"><b>仅需支付</b>
                            </div>
                            <div class="right" style="color: rgb(254, 81, 100);"><b>￥{$book['price']}</b>
                            </div>
                        </li>
                    </div>
                </div>
                <div class="redp-wrap">
                    <div class="redp-no-opened" style="display: none;">
                        <div class="g-fixed" style="z-index: 2;">
                            <div class="g-mask"></div>
                            <div class="g-fixed-center g-zoomin redp-no-opened-content g-text-center" style="background-image: url('{RES}img/redbg.png');">
                                <img class="avatar" src="{php echo toimage($cfg['deanAvatar'])}" alt="">
                                <p class="g-letter-spacing name">院长</p>
                                <p class="g-letter-spacing l1">给你发了一个新人红包</p>
                                <img src="{RES}img/open.png" class="open-icon">
                                <img class="close" src="{RES}img/close.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="redp-opened" style="display: none;">
                        <div class="g-fixed rp-open" style="z-index: 2; line-height: 0;">
                            <div class="g-mask"></div>
                            <div class="redp-opened-content g-fixed-center g-zoomin">
                                <div class="avatar-wrap">
                                    <div class="avatar">
                                        <img src="{php echo toimage($cfg['deanAvatar'])}" alt="">
                                    </div>
                                    <p>院长的红包</p>
                                </div>
                                <div class="price">
                                    <p>{$book['redback']}</p><small>元</small>
                                </div>
                                <div class="l1">新人专享</div>
                                <div class="btn">立即使用</div>
                                <div class="time">距离过期还有：59分59秒</div>
                                <img class="close" src="{RES}img/close.png" alt="">
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                    $(function(){
                    	var name = 'redp{$book["id"]}';
                    	var redp = getCookie(name);
                    	if(redp){
                    		$('.redp-no-opened-audio').hide();
                    		$('.redp-opened-audio').show();
                    	}else{
	                    	setTimeout(function(){$('.redp-no-opened').show()},3000);
                    	}
                    	$('.redp-no-opened .open-icon').click(function(){
                    		$('.redp-no-opened').hide();
                    		$('.redp-opened').show();
                    		var t = 3599;
                    		timer = setInterval(function(){
                    			t--;
                    			var i = Math.floor(t/60);
                    			var s = t%60;
                    			$('.redp-opened .time').html('距离过期还有：'+i+'分'+s+'秒');
                                if(t==0){
                                    clearInterval(timer);   //定时器清除；
                                }
                            },1000);
                    	});
                    	$('.redp-no-opened .close').click(function(){
                    		$('.redp-no-opened').hide();
                    	});
                    	$('.redp-opened .close').click(function(){
                    		$('.redp-opened').hide();
                    	});
                    	$('.redp-opened .btn').click(function(){
                    		$('.redp-opened').hide();
                    		$('.redp-no-opened-audio').hide();
                    		$('.redp-opened-audio').show();
                    		$('.rp-box').show();
                    		setCookie(name,1,0.2);
                    	});
                    })
                    </script>
                </div>
                <div class="botton-wrap">
                    <div class="audio-schedule g-text-center g-font-14" style="display: none;">
                        <div class="schedule-start">00:00</div>
                        <div class="schedule-bar-wrap">
                            <div class="schedule-bar">
                                <div class="schedule-len" style="width: 0px;">
                                    <div class="schedule-head"></div>
                                </div>
                            </div>
                        </div>
                        <div class="schedule-end">04:14</div>
                    </div>
                    <div class="audio-btn-wrap redp-no-opened-audio">
                        <a href="javascript:;" class="play-button g-flex row-center col-center g-push">
                            <img src="{RES}img/play.png" style="width: 17px;">
                        </a>
                        <div class="audio-txt">
                            <p><b>免费</b>
                            </p>
                            <p><b>试听</b>
                            </p>
                        </div>
                    </div>
                    <a class="bottom-button-right g-text-center g-normal-a g-push redp-no-opened-audio" href="javascript:;">
                        <div class="bottom-button-right-left">
                            <p style="font-size: 22px; line-height: 22px;"><b>￥{$book['original']}</b>
                            </p>
                        </div>
                        <div class="bottom-button-right-right paybuton">
                            <p><b>立即报名</b>
                            </p>
                        </div>
                    </a>
                    
                    <div class="button-left audio-ctrl redp-opened-audio" style="display: none;">
                    	<a href="javascript:;" class="play-button g-flex row-center col-center" style="width: 40px; height: 40px; border-radius: 20px;">
                    		<img src="{RES}img/play.png" style="width: 14px;">
                    	</a>
                    	<div class="audio-txt">试听</div>
                    </div>
                    <a class="button-mid-right g-text-center g-normal-a redp-opened-audio" href="javascript:;" style="display: none;text-decoration: none;">
                    	<div class="">
                    		<div class="redp-bottom-btn">
                    			<div class="redp-bottom-btn-left">
                    				<div class="top"><del>原价￥{$book['original']}</del></div>
                    				<div class="bottom"><span>红包折扣￥{$book['redback']}</span></div>
                    			</div>
                    			<div class="redp-bottom-btn-right g-flex col-center g-text-center row-center paybuton">
	                    			<div>
		                    			<p class="g-font-12" style="line-height: 12px; margin-bottom: 5px;">仅需支付 ￥{$book['price']}</p>
		                    			<p class="g-font-18" style="line-height: 18px;">
		                    				<b>立即报名</b>
		                    			</p>
	                    			</div>
	                    		</div>
	                    	</div>
	                    </div>
					</a>
                </div>
                <div class="g-modal  g-hidden">
                    <div class="g-mask"></div>
                    <div class="dialog">
                        <div class="content">
                            <div class="modal-body">
                                <p class="g-font-16">课程尚未开放</p>
                                <p class="g-font-16">加入学习计划可畅听所有课程</p>
                            </div>
                        </div>
                        <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">取消</a><a class="g-modal-btn active paybuton" href="javascript:;">立即报名</a>
                        </div>
                    </div>
                </div>
                <div class="g-modal  g-hidden">
                    <div class="g-mask"></div>
                    <div class="dialog">
                        <div class="content">
                            <div class="modal-body">
                                <p class="g-font-16">试听已结束</p>
                                <p class="g-font-16">加入学习计划可畅听所有课程</p>
                            </div>
                        </div>
                        <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">取消</a><a class="g-modal-btn active paybuton" href="javascript:;">立即报名</a>
                        </div>
                    </div>
                </div>
                <audio id="course_audio" src="{php echo toimage($chapter[$dir[0]['id']][0]['link'])}" preload="metadata" class="g-hidden"></audio>
            </div>
        </div>
    </div>
    </div>
</div>
{template 'loading'}
<script type="text/javascript">
                   		
document.addEventListener('DOMContentLoaded', function() {
	audioAutoPlay('course_audio');
});
function audioAutoPlay(obj) {
	var audio = document.getElementById(obj);
	document.addEventListener("WeixinJSBridgeReady", function() {
		audio.play();
		audio.pause();
	}, false);
}

var audio = document.getElementById('course_audio');
$(audio).on('loadeddata',function(){
	$('.schedule-end').text(secondToMin(audio.duration));
	var timeshow = '';
	$('.play-button').click(function(){
		$('.redp-opened').hide();
		$('.redp-no-opened').hide();
		$('.rp-box').hide();
		if (audio.paused){ /*如果已经暂停*/
			audioPlay();
        }else {
        	audioPause();
        }
	});
	
	function audioPlay(){
		$('.play-button').find('img').attr('src',"{RES}img/pause.png");
		$('.audio-schedule').css('display','flex');
		audio.play(); /*播放*/
		$('.menu g-mask-box').show();
		$('.menu .menu-wrap').css('bottom','0');
		timeshow = setInterval(function(){
			if (audio.paused){
				audio.play();
			}
   			if(audio.currentTime >= audio.duration){
   				audio.currentTime = 0;
   				audio.pause();
   	        	clearInterval(timeshow);
   	        	$('.play-button').find('img').attr('src',"{RES}img/play.png");
   			}
   			setTimeShow();
   		},1000);
	}
	
	function audioPause(){
		$('.play-button').find('img').attr('src',"{RES}img/play.png");
			$('.menu g-mask-box').hide();
			$('.menu .menu-wrap').css('bottom','-340px');
		$('.audio-schedule').css('display','none');
       	audio.pause();/*暂停*/
       	clearInterval(timeshow);
	}
	
	$('.menu-top').click(function(){
		audioPause();
	});
	
	function setTimeShow(playTime){
		if(!playTime) playTime = audio.currentTime;
		if(playTime>audio.duration) playTime = audio.duration;
		var totalTime = audio.duration;
		$('.schedule-start').text(secondToMin(playTime));
		var w = (playTime/totalTime).toFixed(4) * 100;
		$('.schedule-len').css('width',w+'%');
	}
	function secondToMin(s){
		var M = Math.floor(s/60);
		var S = s%60;
		if(M<10){
			M = '0' + M;
		}
		if(S<10){
			S = '0' + S;
		}
		var min = M + ':' + S;
		return min.split('.')[0];
		}
	
	
	var point = $('.schedule-head');
	var current_time = 0;
	point.on({//绑定事件
        touchstart:function(e){
        	//开始拖曳
        	audio.pause();
        	clearInterval(timeshow);
        	$('.play-button').find('img').attr('src',"{RES}img/play.png");
        },
        touchmove:function(e){
        	//拖曳中
        	e.preventDefault();
        	start_x = $('.schedule-bar-wrap').offset().left;
            barlen = parseFloat($('.schedule-bar-wrap').width());
            moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
            moveX = parseFloat(moveX) - parseFloat(start_x);
            if(moveX <= 0) moveX = 0;
            if(moveX>barlen) moveX = barlen;
            current_time = (moveX / barlen) * audio.duration;
            setTimeShow(current_time);
        },
        touchend:function(e){
        	//拖曳结束
        	audio.currentTime = current_time;
        	if(audio.currentTime >= audio.duration){
   				audio.currentTime = 0;
   	        	$('.play-button').find('img').attr('src',"{RES}img/play.png");
   	        	setTimeShow();
   			}else{
	        	audioPlay();
   			}
        }
	});   
});
</script>
<script type="text/javascript">
$(function(){
	$('.paybuton').click(function(){
		window.location.href = "{php echo $this->murl('buy',array('id'=>$id))}";
	});
})
</script>
</body>
</html>